<template>
  <view class="middle-options">
    <navigator url="/pages/history/history" class="option-item">
      <image
        class="option-image"
        src="/static/images/my-history.png"
        mode="aspectFill"
      ></image>
      <text class="option-text">浏览历史</text>
    </navigator>
    <navigator url="/pages/collection/collection" class="option-item">
      <image
        class="option-image"
        src="/static/images/my-collection.png"
        mode="aspectFill"
      ></image>
      <text class="option-text">我的收藏</text>
    </navigator>
    <view class="option-item">
      <image
        class="option-image"
        src="/static/images/lease.png"
        mode="aspectFill"
      ></image>
      <text class="option-text">历史租约</text>
    </view>
    <view class="option-item">
      <image
        class="option-image"
        src="/static/images/publish.png"
        mode="aspectFill"
      ></image>
      <text class="option-text">我的发布</text>
    </view>
  </view>
</template>
<style scoped lang="scss">
// 中部选项栏
.middle-options {
  display: flex;
  background: #ffffff;
  height: 13vh; /* 保持容器高度 */
  margin: 15rpx 0px;
  flex-direction: row; /* 水平排列子元素 */
  align-items: center; /* 垂直居中子元素 */
  justify-content: space-around; /* 子元素之间的间距均匀分布 */
}

.option-item {
  display: flex;
  flex-direction: column; /* 子元素垂直排列 */
  align-items: center; /* 子元素水平居中 */
  justify-content: center; /* 子元素垂直居中 */
  width: 25%; /* 每个选项项占据1/4的宽度 */
  height: 100%; /* 选项项高度填满容器 */
}

.option-image {
  width: 70rpx; /* 图片宽度 */
  height: 70rpx; /* 图片高度 */
  object-fit: cover; /* 保持图片比例 */
}

.option-text {
  font-size: 30rpx; /* 文字大小 */
  color: #333; /* 文字颜色 */
  margin-top: 20rpx; /* 文字与图片之间的间距 */
}
</style>
